<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" >

      <template slot="blank_1541408720000_67454" slot-scope="scope">
        <!-- 贴现金额 -->
        <!-- 通过 v-model="scope.model.blank_1541408720000_67454" 绑定数据 -->
        <el-col :span="6"><el-input v-model="input1" placeholder=""/></el-col>
        <el-col :span="3" style="text-align:center;">到</el-col>
        <el-col :span="6"><el-input v-model="input2" placeholder=""/></el-col>
      </template>

    </generate-form>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <generate-table ref="generateTable" :data="jsonDataTable" :remote="remoteFuncs" :value="editData">
      <!--自定义新增编辑页面内容-->
      <!--<template slot="table_dialog" slot-scope="scope">-->
      <!--<generate-form :ref="scope.form" :data="jsonData" :remote="remoteFuncs" :value="scope.data"/>-->
      <!--</template>-->
    </generate-table>
    <div class="generate-block">
      <el-button type="primary">发出申请</el-button>
      <el-button type="primary">导出到excel</el-button>
    </div>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      input1: '',
      input2: '',
      jsonData:
        {
          'list': [
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '贴现借据号',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541408705000_55215'
                      },
                      'key': '1541408705000_55215',
                      'model': 'input_1541408705000_55215',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'blank',
                      'name': '贴现金额',
                      'icon': 'chalkboard',
                      'options': {
                        'defaultType': 'String',
                        'remoteFunc': 'func_1541408720000_67454'
                      },
                      'key': '1541408720000_67454',
                      'model': 'blank_1541408720000_67454',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541408696000_74583'
              },
              'key': '1541408696000_74583',
              'model': 'grid_1541408696000_74583',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '贴现业务类型',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'DiscountingBusiness'
                      },
                      'key': '1541408730000_83110',
                      'model': 'select_1541408730000_83110',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '贴现状态',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'DiscountStates'
                      },
                      'key': '1541408833000_81564',
                      'model': 'select_1541408833000_81564',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541408724000_36512'
              },
              'key': '1541408724000_36512',
              'model': 'grid_1541408724000_36512',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '票据是否锁定',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'Lock'
                      },
                      'key': '1541408872000_95043',
                      'model': 'select_1541408872000_95043',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '贴入行行名',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541408917000_42114'
                      },
                      'key': '1541408917000_42114',
                      'model': 'input_1541408917000_42114',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541408871000_52784'
              },
              'key': '1541408871000_52784',
              'model': 'grid_1541408871000_52784',
              'rules': []
            }
          ],
          'config': {
            'labelWidth': 100,
            'labelPosition': 'right'
          },
          'table': {
            'showRemove': false,
            'showIndexCol': false,
            'showEdit': false,
            'showExport': false,
            'showAdd': false,
            'stripe': true,
            'border': true
          }
        },
      jsonDataTable:
        {
          'list': [
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '贴现借据号',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'number',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541415692000_1826'
                      },
                      'key': '1541415692000_1826',
                      'model': 'input_1541415692000_1826',
                      'rules': [
                        {
                          'type': 'number',
                          'message': '贴现借据号格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '实（付）收金额',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'number',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541415709000_11284'
                      },
                      'key': '1541415709000_11284',
                      'model': 'input_1541415709000_11284',
                      'rules': [
                        {
                          'type': 'number',
                          'message': '实（付）收金额格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541415683000_33651'
              },
              'key': '1541415683000_33651',
              'model': 'grid_1541415683000_33651',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'date',
                      'name': '贴现起息日',
                      'icon': 'regular/calendar-alt',
                      'options': {
                        'defaultValue': '',
                        'readonly': false,
                        'disabled': false,
                        'editable': true,
                        'clearable': true,
                        'placeholder': '',
                        'startPlaceholder': '',
                        'endPlaceholder': '',
                        'type': 'date',
                        'format': 'yyyy-MM-dd',
                        'timestamp': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541415726000_34907'
                      },
                      'key': '1541415726000_34907',
                      'model': 'date_1541415726000_34907',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'date',
                      'name': '赎回日期',
                      'icon': 'regular/calendar-alt',
                      'options': {
                        'defaultValue': '',
                        'readonly': false,
                        'disabled': false,
                        'editable': true,
                        'clearable': true,
                        'placeholder': '',
                        'startPlaceholder': '',
                        'endPlaceholder': '',
                        'type': 'date',
                        'format': 'yyyy-MM-dd',
                        'timestamp': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541415746000_58998'
                      },
                      'key': '1541415746000_58998',
                      'model': 'date_1541415746000_58998',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541415717000_23616'
              },
              'key': '1541415717000_23616',
              'model': 'grid_1541415717000_23616',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '贴现种类',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'DiscountKind'
                      },
                      'key': '1541415761000_47857',
                      'model': 'select_1541415761000_47857',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '贴现利率',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541415908000_96210'
                      },
                      'key': '1541415908000_96210',
                      'model': 'input_1541415908000_96210',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541415750000_43267'
              },
              'key': '1541415750000_43267',
              'model': 'grid_1541415750000_43267',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '贴入单位',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541415947000_69155'
                      },
                      'key': '1541415947000_69155',
                      'model': 'input_1541415947000_69155',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '实付(收)贴现利息',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'number',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541415959000_89231'
                      },
                      'key': '1541415959000_89231',
                      'model': 'input_1541415959000_89231',
                      'rules': [
                        {
                          'type': 'number',
                          'message': '实付(收)贴现利息格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541415920000_3757'
              },
              'key': '1541415920000_3757',
              'model': 'grid_1541415920000_3757',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '付息方式',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'PayWay'
                      },
                      'key': '1541416013000_6483',
                      'model': 'select_1541416013000_6483',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '贴现状态',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'DiscountStates'
                      },
                      'key': '1541416042000_75261',
                      'model': 'select_1541416042000_75261',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541416012000_1987'
              },
              'key': '1541416012000_1987',
              'model': 'grid_1541416012000_1987',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'upload',
                      'name': '附件',
                      'icon': 'upload',
                      'options': {
                        'defaultValue': [],
                        'action': 'https://jsonplaceholder.typicode.com/posts/',
                        'multiple': true,
                        'limit': 3,
                        'drag': false,
                        'disabled': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541416093000_19939'
                      },
                      'key': '1541416093000_19939',
                      'model': 'upload_1541416093000_19939',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': []
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541416086000_74740'
              },
              'key': '1541416086000_74740',
              'model': 'grid_1541416086000_74740',
              'rules': []
            }
          ],
          'config': {
            'labelWidth': 100,
            'labelPosition': 'right'
          },
          'table': {
            'showRemove': false,
            'showIndexCol': false,
            'showEdit': false,
            'showExport': false,
            'showAdd': false,
            'stripe': true,
            'border': true
          }
        },
      editData: {},
      values: {},
      remoteFuncs: {
        DiscountingBusiness(resolve) {
          getCodeList('贴现业务类型').then(response => { resolve(response.data) })
        },

        DiscountStates(resolve) {
          // 贴现状态 select_1541408833000_81564
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('贴现状态').then(response => { resolve(response.data) })
        },

        Lock(resolve) {
          // 票据是否锁定 select_1541408872000_95043
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('票据是否锁定').then(response => { resolve(response.data) })
        },
        ayWay(resolve) {
          // 付息方式 select_1541416013000_6483
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('付息方式').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
